<template>
	<view class="content">
		<!--		<view class="title">填写资料</view>-->
		<view class="img">
			<!-- #ifdef MP -->
			<button open-type="chooseAvatar" @chooseavatar="chooseavatar">
				<image :src="formData.avatar" class="avatar" mode=""></image>
			</button>
			<!-- #endif -->
			<!-- #ifndef MP -->
			<image :src="formData.avatar" class="avatar" @click="chooseImage" mode=""></image>
			<!-- #endif -->

		</view>
		<view class="form">
			<view class="form-item">
				<input type="nickname" placeholder="昵称  |  最多8字" placeholder-class="p-class"
					v-model="formData.nickname" />
			</view>
			<view class="form-item">
				<input type="number" placeholder="请输入您的年龄" placeholder-class="p-class" v-model="formData.age" />
			</view>
			<!-- #ifdef MP -->
			<view class="form-item">
				<input type="number" placeholder="请输入您的手机号" placeholder-class="p-class" v-model="formData.mobile" />
			</view>
			<!-- #endif -->
		</view>
		<view class="tixing">性别 | 注册后不可更改</view>
		<view class="sex">
			<view class="sex-kuai" :class="{'nv-color':formData.sex == 2}" @click="formData.sex = 2">
				<image src="/static/index/nv1.png" mode=""></image>
				<text class="sex-tex">女</text>
			</view>
			<view class="sex-kuai" :class="{'nan-color':formData.sex == 1}" @click="formData.sex = 1">
				<image src="/static/index/nan1.png" mode=""></image>
				<text class="sex-tex">男</text>
			</view>
		</view>
		<view class="" style="height: 120rpx;"></view>
		<view class="jump-btn" @click="handleJumpStep">跳过</view>
		<view class="btn" @click="submit">完成</view>

		<permissionGuide ref="refPermissionGuide" />
	</view>
</template>
<script>
	import {
		assertObject,
		assertString
	} from '@/tools/tools.js';
	import permissionGuide from "@/components/permissionGuide/index.vue"
	import {
		host
	} from '@/siteinfo.js'
	export default {
		components: {
			permissionGuide
		},
		data() {
			return {
				formData: {
					avatar: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/u.png',
					isava: 0,
					nickname: '',
					sex: 0,
					mobile: '',
					age: ''
				},
				op: '',
				action: ''
			}
		},
		onLoad(option) {
			this.action = host + '/api/user/up_img'
			if (option.op) {
				this.op = option.op
			}
		},
		methods: {

			getSmsCode() {
				return new Promise((resolve, reject) => {
					this.$request({
						method: 'post',
						url: `/api/login/sendsms`,
						data: {
							mobile: uni.getStorageSync('user_reg').mobile,
							event: 'mobilelogin'
						}
					}).then(result => {
						resolve(result.data.data.code)
					})
				})
			},
			submit() {
				// if (this.formData.isava == 0) {
				// 	this.msg('请上传头像')
				// 	return
				// }
				if (this.formData.nickname == '') {
					this.msg('请输入昵称')
					return
				}
				if (this.formData.age == '') {
					this.msg('请输入年龄')
					return
				}
				if (this.formData.sex == 0) {
					this.msg('请选择性别')
					return
				}
				// #ifdef MP
				if (this.formData.mobile == '') {
					this.msg('请输入手机号')
					return
				}
				// #endif

				// #ifdef MP
				this.post_xcx()
				// #endif
				// #ifdef APP||H5
				this.post_app()
				// #endif
			},
			async post_app() {
				let that = this;
				let data = uni.getStorageSync('user_reg')
				data.nickname = that.formData.nickname
				data.sex = that.formData.sex
				data.avatar = that.formData.avatar
				data.op = that.op
				data.daren_id = uni.getStorageSync('daren_id')

				if (!data.code) {
					data['code'] = await this.getSmsCode()
				}

				try {
					let result = await that.$request({
						loading: 1,
						method: 'post',
						url: '/api/login/set_user',
						data: data
					});
					uni.hideLoading()
					let token = assertObject(result.data.data).login_token;
					let user_id = result.data.data.user_id;
					uni.setStorageSync('user_id', user_id);
					that.$store.commit('setToken', token);
					uni.setStorageSync('user_reg_xcx', '');
					uni.setStorageSync('user_reg', '');
					that.bind()
					uni.setStorageSync('token', token);
					uni.hideLoading();
					that.hasTokenGetUserInfo(() => {
						uni.hideLoading();
						uni.showToast({
							icon: 'success',
							title: '登录成功'
						});
						uni.$emit('loginok', true);
						setTimeout(() => {

							uni.switchTab({
								url: "/pages/index"
							})
						}, 500);
					});
				} catch (e) {
					console.log(e)
					this.msg(e.data.msg)
					//TODO handle the exception
				}

			},


			async post_xcx() {
				this.formData.open_id = uni.getStorageSync('user_reg_xcx')
				this.formData.daren_id = uni.getStorageSync('daren_id')
				this.formData.op = this.op
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/login/set_user_xcx',
						data: this.formData
					});
					console.log(result)
					let token = assertObject(result.data.data).login_token;
					let user_id = result.data.data.user_id;
					uni.setStorageSync('user_id', user_id);
					this.$store.commit('setToken', token);
					uni.setStorageSync('user_reg_xcx', '');
					uni.setStorageSync('user_reg', '');
					this.bind()
					uni.setStorageSync('token', token);
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: '登录成功'
					});
					uni.$emit('loginok', true);
					setTimeout(() => {
						// uni.navigateBack({
						// 	delta: 1
						// });
						uni.switchTab({
							url: "/pages/index"
						})
					}, 500);

				} catch (e) {
					console.log(e)
					this.msg(e.data.msg)
				}

			},
			chooseavatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.uploadFile(avatarUrl)
			},
			// 上传头像
			chooseImage() {
				uni.showActionSheet({
					itemList: ["相册照片", "拍照"],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.handleChooseImage("album");
						}
						if (res.tapIndex == 1) {
							this.handleChooseImage("camera");
						}
					}
				})
			},
			handleChooseImage(sourceType) {
				this.$uniApiBaseChooseImage({
					count: 1,
					sourceType: [sourceType],
				}).then((res) => {
					this.uploadFile(res.tempFilePaths[0])
				}).catch(error => {
					if (error.errMsg == "show-permision-guide") {
						this.$refs.refPermissionGuide.open({
							perName: sourceType
						})
					}
				})
			},
			uploadFile(filePath) {
				console.log(this.action)
				uni.uploadFile({
					url: this.action, //仅为示例，非真实的接口地址
					filePath,
					name: 'file',
					formData: {
						'token': uni.getStorageSync('token'),
						'user': 'test'
					},
					success: (uploadFileRes) => {
						console.log('3')
						let data = JSON.parse(uploadFileRes.data)
						console.log(data)
						this.formData.avatar = data.data.file
						this.formData.isava = 1
					},

				});
			},

			bind() {
				let msg = {
					'type': 'bind',
					'fromid': uni.getStorageSync('user_id')
				};
				uni.sendSocketMessage({
					data: JSON.stringify(msg),
					success: (res) => {
						console.log('login绑定会员id成功' + uni.getStorageSync('user_id'), res)
					},
					fail: (res) => {
						//console.log('绑定会员id失败'+uni.getStorageSync('user_id'), res)
					}
				});

			},
			handleJumpStep() {
				if (this.formData.nickname == '') {
					this.msg('请至少输入昵称')
					return
				}
				this.post_app()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		padding: 100rpx 40rpx 0 40rpx;
		background: #fff;
		height: 100vh;

		.title {
			font-size: 48rpx;
			font-weight: bold;
			color: #333333;
		}

		.img {
			margin-top: 80rpx;
			/* #ifndef MP */
			display: flex;
			justify-content: center;
			/* #endif */

			button {
				background-color: transparent;
			}

			.avatar {
				width: 198rpx;
				height: 198rpx;
				border-radius: 50%;
			}
		}

		.form {
			margin-top: 48rpx;

			.form-item {
				height: 100rpx;
				background: #efefef;
				border-radius: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				margin-bottom: 32rpx;

				input {
					color: #333333;
					flex: 1;
					background: #EFEFEF;
				}

				.p-class {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333ad;
				}

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.tixing {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}

		.sex {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.sex-kuai {
				width: 319rpx;
				height: 100rpx;
				background: #efefef;
				border-radius: 80rpx;
				display: flex;
				align-items: center;

				image {
					width: 64rpx;
					height: 64rpx;
					margin: 0 20rpx 0 24rpx;
				}

				.sex-tex {
					font-size: 32rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			.nv-color {
				background-color: #FFB2F9;

				.sex-tex {
					color: #333333;
				}
			}

			.nan-color {
				background-color: #9D5EF4;

				.sex-tex {
					color: #333333;
				}
			}
		}

		.jump-btn {
			width: 120rpx;
			padding: 20rpx 0;
			position: fixed;
			left: 0;
			right: 0;
			margin: 0 auto;
			bottom: 150rpx;
			text-align: center;
		}

		.btn {
			position: fixed;
			left: 40rpx;
			right: 40rpx;
			bottom: 40rpx;
			height: 98rpx;
			background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
			border-radius: 49rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 98rpx;
			margin-top: 317rpx;
		}
	}
</style>